<template>
	<div class="_indexClass" v-if="!_showPage">
		<el-notice v-if="_showNotice" :noticeDat="noticeDat"></el-notice>
		<el-survey v-if="_showSurvey" :noticeDat="noticeDat"></el-survey>
		<div class="index_left">
			<div class="index_left-top">
				<span class="box_title">
					<i style="background-image: url('/imgs/index/icon_1.png'); width: 18px; height: 20px"></i>
					<p>学校介绍</p>
				</span>
				<div>
					<p v-show="noticeIndex == 1">
						&nbsp&nbsp衢州智造新城实验学校是市教育局直属公办义务教育学校，引进天立教育资源品牌方进行合作办学，作为衢州二中创新人才贯通培养基地，开展小初高创新人才一体化培养合作，是一所追求高起点、高质量、优服务的学校。坚持人本、科学、开放，倡导运动、崇尚阅读、鼓励体验。以“天之骄子，立己达人”为校训，打造高素质的师资队伍，围绕独创的“六立一达”的课程体系，赋能每一个孩子身心健康、成人成才。
					</p>
					<img v-show="noticeIndex == 2" src="/imgs/index/1.jpg" alt="" />
					<img v-show="noticeIndex == 3" src="/imgs/index/2.jpg" alt="" />
				</div>
				<span class="noticebtn">
					<i class="pbtn" :style="{ background: noticeIndex == 1 ? '#5DB4FF' : '' }" @click="changeNotice(1)"></i>
					<i class="pbtn" :style="{ background: noticeIndex == 2 ? '#5DB4FF' : '' }" @click="changeNotice(2)"></i>
					<i class="pbtn" :style="{ background: noticeIndex == 3 ? '#5DB4FF' : '' }" @click="changeNotice(3)"></i>
				</span>
			</div>
			<div class="index_left-bottom" v-show="leftMenuList.userData?.length > 0">
				<span class="box_title">
					<i style="background-image: url('/imgs/index/icon_2.png'); width: 19px; height: 19px"></i>
					<p>数据管理</p>
				</span>
				<ul>
					<li>
						<span @click="getYW_menu">用户数据</span>
						<i style="width: 385px; height: 1px; border: 1px solid #e1e1e1"></i>
						<div>
							<p v-for="i in leftMenuList.userData" @click="runToNew(i)">{{ i.label }}</p>
							<!-- <p>用户账号管理</p>
              <p style="margin-left: 20px">用户权限管理</p> -->
						</div>
					</li>
					<li>
						<span>组织架构</span>
						<i style="width: 385px; height: 1px; border: 1px solid #e1e1e1"></i>
						<div>
							<p v-for="i in leftMenuList?.deptData" @click="runToNew(i)">{{ i.label }}</p>
						</div>
					</li>
					<li>
						<span>在线统计</span>
						<i style="width: 385px; height: 1px; border: 1px solid #e1e1e1"></i>
						<div>
							<p v-for="i in leftMenuList?.online" @click="runToNew(i)">{{ i.label }}</p>
						</div>
					</li>
					<li>
						<span>学校信息</span>
						<i style="width: 385px; height: 1px; border: 1px solid #e1e1e1"></i>
						<div>
							<p v-for="i in leftMenuList?.system" @click="runToNew(i)">{{ i.label }}</p>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="index_mid">
			<div class="index_mid-top">
				<span class="box_title">
					<i style="background-image: url('/imgs/index/icon_3.png'); width: 23px; height: 19px"></i>
					<p>系统导航</p>
				</span>
				<div>
					<span class="pbtn" v-for="n in centerMenuList" @click="runToNew(n)">
						<i :style="['background-image:url(/imgs/index/' + n.label + '.png)']"></i>
						<p v-if="n.label != '校园安全管理中心'">
							{{ n.label }}
						</p>
						<p v-if="n.label == '校园安全管理中心'">校园安全 <br />管理中心</p>
					</span>
				</div>
			</div>
			<div class="index_mid-bottom">
				<span class="box_title">
					<i style="background-image: url('/imgs/index/icon_4.png'); width: 24px; height: 20px"></i>
					<p class="pbtn" :style="[tabIndex == 1 ? tabStyle : '']" @click="tabIndex = 1">
						校园公告
						<el-badge :value="unreadNoticeCount" class="header-badge" :max="99" />
					</p>
					 <!-- <p class="pbtn" :style="[tabIndex == 2 ? tabStyle : '']" @click="tabIndex = 2">
						问卷调查
						<el-badge :value="unreadSurveyCount" class="header-badge" :max="99" />
					</p> -->
				</span>
				<div class="mid-bottom-content">
					<li v-for="i in noticeForm" v-show="tabIndex == 1">
						<div class="bottom-content_imgLeft">
							<Lottie :animation-data="Animation" :loop="true" :autoplay="true" />
						</div>
						<div class="bottom-content_right">
							<el-badge :is-dot="!i.isRead" class="isdot" style="font-size: 16px; color: #171a1d" :offset="[10, 5]">
								{{ i.noticeTitle }}
							</el-badge>
							<p style="font-size: 14px; color: #7d8a96; margin: 5px 0">{{ i.createTime }}</p>
							<span class="pbtn" @click="openNotice(i)">
								<p style="font-size: 14px; color: #67abe5">查看详情</p>
								<i style="background-image: url('/imgs/index/箭头.png')"></i>
							</span>
						</div>
					</li>
					<li v-for="i in suveryForm" v-show="tabIndex == 2">
						<div class="bottom-content_imgLeft">
							<Lottie :animation-data="Animation2" :loop="true" :autoplay="true" />
						</div>
						<div class="bottom-content_right">
							<el-badge :is-dot="!i.isRead" class="isdot" style="font-size: 16px; color: #171a1d" :offset="[10, 5]">
								{{ i.title }}
							</el-badge>
							<p style="font-size: 14px; color: #7d8a96; margin: 5px 0">{{ i.createTime }}</p>
							<span class="pbtn" @click="openSurvey(i)">
								<p style="font-size: 14px; color: #67abe5">查看详情</p>
								<i style="background-image: url('/imgs/index/箭头.png')"></i>
							</span>
						</div>
					</li>
				</div>
			</div>
		</div>
		<div class="index_right">
			<div class="index_right-top">
				<span class="box_title">
					<i style="background-image: url('/imgs/index/icon_5.png'); width: 19px; height: 21px"></i>
					<p>个人账户管理</p>
				</span>
				<div class="right-top_box">
					<div class="right-top_box-top">
						<i style="background-image: url('/imgs/index/管理员图标.png')"></i>
						<span>你好，{{ userDate ? userDate.nickName : '' }}</span>
					</div>
					<div class="right-top_box-bottom">
						<p>工号：{{ userDate ? userDate.username : '' }}</p>
						<p>姓名：{{ userDate ? userDate.realName : '' }}</p>
						<p>部门：{{ userDate ? userDate.deptName : '' }}</p>
					</div>
				</div>
			</div>
			<div class="index_right-bottom">
				<span class="box_title">
					待办事宜/重要提醒 <el-badge :value="unreadYWnoticeCount" class="header-badge" :max="99" /> <i
						style="background-image: url('/imgs/index/icon_6.png'); width: 20px; height: 23px"></i>

				</span>
				<ul>
					<li v-for="i in YWnotice">
						<i style="background-image: url('/imgs/index/待办.png')"></i>
						<span>
							<el-badge :is-dot="!i.isRead" class="isdot" style="font-size: 16px; color: #171a1d" :offset="[10, 5]">
								{{ i.noticeTitle }}
							</el-badge>
							<p style="font-size: 14px; color: #7d8a96">
								{{ i.createTime }}
							</p>
						</span>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="_indexIframe" v-if="_showPage">
		<iframe :src="_ifUrl" frameborder="0" width="100%" height="100%"></iframe>
	</div>
</template>

<script setup>
	import Lottie from '@/components/lottie.vue'
	import elNotice from '@/components/el-notice.vue'
	import elSurvey from '@/components/el-survey.vue'
	import apis from '@/api/index.js'
	import apisyw from '@/api/index_yw.js'
	import {
		onMounted,
		onUnmounted,
		ref,
		computed
	} from 'vue'
	import {
		useStore
	} from '@/stores/counter'
	import {
		storeToRefs
	} from 'pinia'
	import Animation from '@/assets/lottie/notice.json'
	import Animation2 from '@/assets/lottie/survey.json'
	const store = useStore()
	const _api = apis()
	const _apiyw = apisyw()
	const {
		_showPage,
		_showNotice,
		_showSurvey,
		childTitle,
		counter,
		_ifUrl
	} = storeToRefs(store)

	const tabIndex = ref(1),
		tabStyle = ref('border-bottom:5px solid #FFFFFF;color: #FFF280;')

	// http://192.168.1.101:2290/system/role/SchoolNav/
	// const _showPage = ref(false)
	const sysDaoHang = ref([])
	const leftMenuList = ref([])
	const centerMenuList = ref([])
	const getYW_menu = () => {
		let url = _ywHtml + '/system/role/SchoolNav/' + localStorage.getItem('userId')
		_apiyw.hDoGet(url, '', '', (res) => {
			// console.log(res)
			sysDaoHang.value = res.data
			centerMenuList.value = sysDaoHang.value.menu
			leftMenuList.value = sysDaoHang.value.leftMenu
			// console.log('leftMenuList.value', leftMenuList.value)
		})
	}
	const noticeForm = ref([])
	const suveryForm = ref([])
	const getNoticeList = () => {
		let url = _jwHtml + '/listAll'
		let urlSV = _jwHtml + '/survey/listByPage'
		let dat = {}
		_api.hDoPost(url, '', dat, (res) => {
			noticeForm.value = res.data.records.map(item => {
				const stored = localStorage.getItem(`notice-${item.noticeId}`);
				return {
					...item,
					isRead: stored !== undefined ? (stored === 'true') : false, // 若存在 localStorage 则使用之，否则默认未读
				}
			})

		})
		_api.hDoPost(urlSV, '', dat, (res) => {
			suveryForm.value = res.data.records.map(item => {
				const stored = localStorage.getItem(`survey-${item.id}`);
				return {
					...item,
					isRead: stored !== undefined ? (stored === 'true') : false,
				}
			})

		})
	}

	const YWnotice = ref([])
	const getYWnotice = () => {
		let url = _ywHtml + '/system/notice/listAll'
		_apiyw.hDoGet(url, '', '', (res) => {
			YWnotice.value = res.rows.map(item => {
				const stored = localStorage.getItem(`YWnotice-${item.noticeId}`);
				return {
					...item,
					isRead: stored !== undefined ? (stored === 'true') : false,
				}
			});
		})
	}
	// http://192.168.1.252:2290/system/notice/listAll
	// http://192.168.1.101:8181/sys/home/    教务系统的用户数据
	const userDate = ref([])
	const getUserDate = () => {
		let url = _jwHtml + '/sys/home/'
		// let dat = {}
		_api.hDoGet(url, '', '', (res) => {
			userDate.value = res.userInfo

			// console.log('userDate.value', userDate.value)
		})
	}

	const noticeDat = ref()
	const openNotice = (i) => {
		i.isRead = true;
		localStorage.setItem(`notice-${i.noticeId}`, 'true');
		updateUnreadCounts();
		noticeDat.value = i
		_showNotice.value = true
	}
	const openSurvey = (i) => {
		i.isRead = true;
		localStorage.setItem(`survey-${i.id}`, 'true');
		updateUnreadCounts();
		noticeDat.value = i
		_showSurvey.value = true
	}
	// const _ifUrl = ref()
	const runToNew = (n) => {
		if (n.label == '九大中心') {
			window.open(n.url)
		} else if(n.label == '校牌'){
			window.open(n.url)
		} else {
			if (n.system == 1) {
				var url =
					_jwHtml +
					n.url +
					'?fesf=' +
					JSON.parse(localStorage.getItem('LocalData')).access_token +
					'&&id=' +
					n.parentId +
					'&&userId=' +
					JSON.parse(localStorage.getItem('LocalData')).userInfo.id +
					'&&typeId=' +
					JSON.parse(localStorage.getItem('LocalData')).userInfo.typeId

			} else {
				var url =
					_ywHtmlTz + n.url + '?fesf=' + JSON.parse(localStorage.getItem('Admin-Token')).admin_token
			}
			_showPage.value = true
			// setTimeout(() => {
			_ifUrl.value = url
			// }, 10000)
			childTitle.value = n.label
		}
	}
	const noticeIndex = ref(1)
	const changeNotice = (index) => {
		noticeIndex.value = index
	}

	const tabChangeTime = () => {
		noticeIndex.value < 3 ? noticeIndex.value++ : (noticeIndex.value = 1)
		setTimeout(() => {
			tabChangeTime()
		}, 3000)
	}


	const unreadNoticeCount = computed(() => {
		return noticeForm.value.filter(item => !item.isRead).length;
	});

	const unreadSurveyCount = computed(() => {
		return suveryForm.value.filter(item => !item.isRead).length;
	});

	const unreadYWnoticeCount = computed(() => {
		return YWnotice.value.filter(item => !item.isRead).length;
	});

	const updateUnreadCounts = () => {
		getNoticeList();
		getYWnotice();
	}

	onMounted(() => {
		getYW_menu()
		getNoticeList()
		getYWnotice()
		getUserDate()
		tabChangeTime()
		updateUnreadCounts();
	})

	onUnmounted(() => {
		_showPage.value = false
	})
</script>

<style lang="scss" scoped>
	._indexIframe {
		width: 100%;
		height: 100%;
		//   background: blue;
		margin: 0 auto;
		display: flex;
	}

	._indexClass {
		width: 1920px;
		height: 100%;
		//   background: blue;
		margin: 0 auto;
		display: flex;

		.index_left {
			width: 440px;
			height: 100%;

			.index_left-top {
				width: 437px;
				height: 331px;
				display: flex;
				flex-direction: column;
				background-image: url('/imgs/index/boxBg1.png');

				div {
					width: 100%;
					height: calc(100% - 90px);
					padding: 15px 30px;

					p {
						font-family: Microsoft YaHei;
						font-weight: 400;
						font-size: 17px;
						color: #171a1d;
						line-height: 20px;
					}

					img {
						width: 100%;
						height: 100%;
						border-radius: 4px;
					}
				}

				.noticebtn {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 60px;
					margin: 0 auto;

					i {
						width: 9px;
						height: 9px;
						border-radius: 50%;
						border: 1px solid #5db4ff;
					}
				}
			}

			.index_left-bottom {
				width: 437px;
				height: 508px;
				display: flex;
				flex-direction: column;
				background-image: url('/imgs/index/boxBg2.png');

				ul {
					width: 100%;
					height: calc(100% - 55px);
					padding: 15px 30px;

					li {
						display: flex;
						flex-direction: column;
						margin-bottom: 25px;

						span {
							font-family: Microsoft YaHei;
							font-weight: 400;
							font-size: 20px;
							color: #171a1d;
							line-height: 30px;
						}

						div {
							display: flex;
							height: 30px;

							:first-child {
								margin-left: 0 !important;
							}

							p {
								line-height: 30px;
								font-family: Microsoft YaHei;
								font-weight: 400;
								font-size: 16px;
								color: #7d8a96;
								margin-left: 20px;
								cursor: pointer;
							}
						}
					}
				}
			}
		}

		.index_mid {
			width: 1005px;
			height: 100%;

			.index_mid-top {
				width: 1005px;
				height: 415px;
				display: flex;
				flex-direction: column;
				background-image: url('/imgs/index/boxBg3.png');

				div {
					width: 100%;
					height: calc(100% - 55px);
					padding: 15px 30px;
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;

					span {
						width: 128px;
						height: 140px;
						display: flex;
						flex-direction: column;
						align-items: center;

						i {
							width: 68px;
							height: 68px;
							margin: 15px 0;
						}

						p {
							font-family: Microsoft YaHei;
							font-weight: 400;
							font-size: 18px;
							color: #171a1d;
							text-align: center;
							// margin-top: 30px;
						}
					}

					span:hover {
						background: rgba(93, 180, 255, 0.15);
						border-radius: 10px;
					}
				}
			}

			.index_mid-bottom {
				width: 1005px;
				height: 424px;
				display: flex;
				flex-direction: column;
				background-image: url('/imgs/index/boxBg4.png');

				.mid-bottom-content {
					width: 100%;
					height: calc(100% - 70px);
					overflow-y: auto;

					li {
						height: 100px;
						width: 90%;
						margin: 0 auto;
						display: flex;
						align-items: center;
						padding: 5px;

						border-bottom: 1px solid #e1e1e1;

						.bottom-content_imgLeft {
							width: 110px;
							height: 79px;
							// background: #41a3f8;
							// border: 2px solid #41a3f8;
						}

						.bottom-content_right {
							padding: 5px;

							p {
								font-family: Microsoft YaHei;
								font-weight: 400;
							}

							span {
								display: flex;
								align-items: center;

								i {
									width: 19px;
									height: 10px;
									margin-left: 5px;
								}
							}
						}
					}
				}
			}
		}

		.index_right {
			width: 440px;
			height: 100%;

			.index_right-top {
				width: 437px;
				height: 331px;
				display: flex;
				flex-direction: column;
				background-image: url('/imgs/index/boxBg5.png');

				.right-top_box {
					width: 100%;
					height: calc(100% - 55px);

					.right-top_box-top {
						width: 100%;
						height: 190px;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						i {
							width: 115px;
							height: 115px;
							margin: 10px;
						}

						span {
							font-family: Microsoft YaHei;
							font-weight: 400;
							font-size: 22px;
							color: #41a3f8;
						}
					}

					.right-top_box-bottom {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						padding: 20px 50px;

						p {
							width: 148px;
							margin: 5px;
							font-family: Microsoft YaHei;
							font-weight: 400;
							font-size: 16px;
							color: #171a1d;
						}
					}
				}
			}

			.index_right-bottom {
				width: 437px;
				height: 508px;
				display: flex;
				flex-direction: column;
				background-image: url('/imgs/index/boxBg6.png');

				ul {
					width: 100%;
					height: calc(100% - 70px);
					display: flex;
					flex-direction: column;
					overflow-y: auto;

					li {
						height: 90px;
						width: 90%;
						margin: 0 auto;
						display: flex;
						align-items: center;
						padding: 5px;

						border-bottom: 1px solid #e1e1e1;

						i {
							width: 58px;
							height: 62px;
						}

						span {
							width: calc(100% - 58px);
							padding: 0 8px;

							p {
								font-family: Microsoft YaHei;
								font-weight: 400;
							}
						}
					}
				}
			}
		}
	}

	.header-badge {
		margin-left: 5px;
		vertical-align: middle;
	}

	.box_title {
		width: 100%;
		height: 55px;
		display: flex;
		align-items: center;
		padding: 0 20px;

		p {
			font-family: Microsoft YaHei;
			font-weight: 400;
			font-size: 20px;
			color: #ffffff;
			margin-left: 11px;
			line-height: 45px;
		}
	}

	.isdot {
		margin-top: 10px;
		margin-right: 30px;
	}
</style>